<script setup lang="ts">
import {ref, onMounted} from 'vue'
//通用分页数据
import {PageData} from "@/ts/CommonTypes";
//Api工具类
import * as apiUtil from "@/api/ApiUtils"
//权限工具类
import * as authUtil from "@/ts/AuthUtils";
//Api接口和类定义
import {apiDeleteById, apiGetList, apiExportList,
SysContentVO, SysContentQuery} from "@/api/SysContentApi"
//表单
import Form from "./form.vue"
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  RedoOutlined,
  FormOutlined,
  DeleteOutlined,
  ClusterOutlined,
} from "@ant-design/icons-vue"


const dataName = ref<string>("内容表，笔记、文章、教程等");

/**
 * 当前选中的id
 */
const currentId = ref<number | null>(null);

/**
 * 查询对象
 */
const query = ref<SysContentQuery>(new SysContentQuery());

/**
 * 分页数据
 */
const pageData = ref<PageData<SysContentVO>>(new PageData<SysContentVO>());

/**
 * 表格展示列
 */
const columns = [
        {title: 'ID', dataIndex:'id', key:'id'},
        {title: '标题', dataIndex:'title', key:'title'},
        {title: '分组', dataIndex:'groupName', key:'groupName'},
        {title: '状态', dataIndex:'status', key:'status'},
        {title: '标签', dataIndex:'tags', key:'tags'},
        {title: '创建人', dataIndex:'createName', key:'createName'},
        {title: '创建时间', dataIndex:'createTime', key:'createTime'},
    {title: '操作', key: 'actionColumn', width: 100}
];

/**
 * 模式
 */
const mode = ref({
  edit: false,
  delete: false
});

/**
 * 分页大小选项
 */
const pageSizeOptions = ["10", "20", "50", "100"];

/**
 * 页面加载后执行的钩子函数
 */
onMounted(() => {
  handleQueryList()
})

/**
 * 查询列表
 */
const handleQueryList = async () => {
  try {
    const res = await apiGetList(query.value)
    if (apiUtil.isSuccessed(res)) {
      pageData.value = res.data;
    }
  } catch (error) {
    apiUtil.notifyError('查询失败', error.message);
  }
}

/**
 * 删除数据
 */
const handleDelete = async () => {
  try {
    const res = await apiDeleteById(currentId.value!);
    if (apiUtil.isSuccessed(res)) {
      apiUtil.notifySuccess('删除成功');
      mode.value.delete = false;
      await handleQueryList();
    }
  } catch (error) {
    apiUtil.notifyError('删除失败', error.message);
  }
}

/**
 * 更改模式，控制添加、修改、删除的弹框
 * @param modeValue
 * @param id
 */
function updateMode(modeValue: "edit" | "delete" , id = null) {
  currentId.value = id;
  switch (modeValue) {
    case "delete":
      mode.value.delete = true;
      break
    case "edit":
      mode.value.edit = true;
      break;
    default:
      break;
  }
}

/**
 * 取消模式的变更
 */
const handleCancel = () => {
  mode.value.edit = false;
  mode.value.delete = false;
  currentId.value = null;
}

/**
 * 分页参数改变
 * @param current
 * @param size
 */
const handlePageChange = (current: number, size: number) => {
  query.value.size = size;
  query.value.current = current;
  handleQueryList();
}

/**
 * 重置查询条件
 */
const handleCleanQuery = () => {
  query.value = new SysContentQuery();
  handleQueryList();
}

/**
 * 导出数据
 */
const handleExport = () => {
  apiExportList(query.value);
}
</script>

<template>
  <main class="page-main">

    <div v-if="mode.edit">
      <Form :dataId="currentId" @close="handleCancel" @successed="handleQueryList" :key="new Date().getTime()"/>

    </div>
    <div v-else>
      <!-- 查询 -->
      <div class="padding-20">
        <a-row>
          <!-- 查询条件 -->
          <a-col :span="18">
            <a-form layout="inline" :label-col="{ style: { width: '80px' } }"
                    :model="query" autocomplete="off">
              <a-row>

                <a-col :span='24'>
                  <a-form-item label='分组ID' name='groupId'>
                    <a-input class='width' v-model:value='query.groupId' />
                  </a-form-item>
                </a-col>

              </a-row>
            </a-form>
          </a-col>
          <!-- 查询按钮 -->
          <a-col :span="6">
            <div class="text-right">
              <a-space size="large">
                <a-button type="default" @click="handleCleanQuery">
                  <template #icon>
                    <RedoOutlined/>
                  </template>
                  重置
                </a-button>
                <a-button type="primary" @click="handleQueryList">
                  <template #icon>
                    <SearchOutlined/>
                  </template>
                  查询
                </a-button>
                <a-button v-if="authUtil.permit('sysContent_button_export')"
                          type="dashed" @click="handleExport">
                  <template #icon>
                    <DownloadOutlined/>
                  </template>
                  导出
                </a-button>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 分隔线 -->
      <div class="space"></div>
      <!-- 表格 -->
      <div class="padding-20">
        <div class="text-right">
          <a-button v-if="authUtil.permit('sysContent_button_add')"
                    type="primary" @click="updateMode('edit')">
            <template #icon>
              <PlusOutlined/>
            </template>
            添加
          </a-button>
        </div>
        <a-table
            :columns="columns"
            :data-source="pageData.records"
            :pagination="false"
            class="ant-table-striped"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'actionColumn'">
              <a-flex class="width" justify="space-around">
                <a-tooltip title="修改" v-if="authUtil.permit('sysContent_button_edit')">
                  <a-button type="text" size="small" class="button-edit" @click="updateMode('edit',record.id)">
                    <template #icon>
                      <FormOutlined/>
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip title="删除" v-if="authUtil.permit('sysContent_button_delete')">
                  <a-button type="text" size="small" class="button-delete" @click="updateMode('delete',record.id)">
                    <template #icon>
                      <DeleteOutlined/>
                    </template>
                  </a-button>
                </a-tooltip>
              </a-flex>
            </template>
          </template>
        </a-table>

        <!-- 分页 -->
        <div class="float-right margin-10-20">
          <a-pagination
              v-model:current="query.current"
              :total="pageData.total"
              show-size-changer
              :page-size-options="pageSizeOptions"
              @showSizeChange="handlePageChange"
              @change="handlePageChange"
          />
        </div>
        <!-- 清理浮动 -->
        <div class="clear"></div>
      </div>
    </div>



    <!-- 删除提示框 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除{{dataName}}吗？ 删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>
  </main>
</template>

<style scoped>
/* 斑马纹表格样式 */
.ant-table-striped :deep(.table-striped) td {
  background-color: #f5f5f5;
}
</style>